function img2Base64(url) {
    return new Promise(resolve => {
        let canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d'),
        img = new Image();
        img.crossOrigin = 'anonymous';//解决Canvas.toDataURL 图片跨域问题
        img.onload = () => {
            canvas.height = img.height;
            canvas.width = img.width;
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            let dataURL = canvas.toDataURL("image/png");
            resolve(dataURL);
            canvas = null;
        };
        img.onerror = () => {
            resolve("");
        }
        img.src = url;
    })
}

function getLink(){
    const link = document.querySelector('link[rel~="icon"]');
    if (link) {
        return link
    } else {
        const link = document.createElement('link');
        link.rel = "icon";
        link.href = "/favicon.ico"
        document.head.append(link);
        return link
    }
}
async function setFavicon(env, color) {
    const link = getLink();
    const icon = await img2Base64(link.href);
    const favicon = `data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><foreignObject x="0" y="0" width="100%" height="100%"><body xmlns="http://www.w3.org/1999/xhtml">
        <style>
            html,body{
                height: 100%;
                margin: 0;
                text-align: center;
            }
            img{
                display: block;
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
            strong{
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                text-transform: uppercase;
                background-color: ${color};
                color: #fff;
                padding: 0px 2px;
                border-radius: 2px;
                font-size: 12px;
                box-sizing: border-box;
                max-width: 100%;
                width: max-content;
                height: 16px;
                line-height: 16px;
                word-break: break-all;
                overflow: hidden;
            }
        </style>
        <strong>${env}</strong>
        <img src='${icon}'></img>
    </body></foreignObject></svg>`.replace(/\n/g, '').replace(/\t/g, '').replace(/#/g, '%23');
    console.log('favicon recreate');
    link.href= favicon;
}

function renameTitle(env){
    const envName = env=='dev'?'沙箱':'生产';
    const title = document.getElementsByTagName("title")[0].innerText;
    if(title.indexOf('phpMyAdmin')>-1){
        document.getElementsByTagName("title")[0].innerText = 'Msql ' + envName;
        appendMsg(document.getElementById('pmalogo'), envName+"环境");
    }
    else if(title.indexOf('Redis')>-1){
        document.getElementsByTagName("title")[0].innerText = 'Redis ' + envName
    }else if(title.indexOf('RocketMq')>-1){
        document.getElementsByTagName("title")[0].innerText = 'RocketMq ' + envName
    }
}

function appendMsg(element,msg){
    var para=document.createElement("p");//创建需要增加的元素节点
    if(msg.indexOf('沙箱')>-1){
        para.style = 'color: green;font-size: 18px;';
    }else{
        para.style = 'color: red;font-size: 18px;';
    }
    var node=document.createTextNode(msg);//创建文本节点
    para.appendChild(node);//将文本节点增加至创建的元素中
    element.appendChild(para);//添加至父节点内
}

window.onload = () => {
    console.log('color onload')
    const host = location.href;
    chrome.storage.sync.get('options', ({options=null}) => {
        let icoEnv = sessionStorage.getItem('ico.env');
        let icoColor = sessionStorage.getItem('ico.color');
        if(options && host.indexOf(options.host)>-1){
            sessionStorage.setItem('ico.env', options.env);
            sessionStorage.setItem('ico.color', options.color);
            // setFavicon(options.env, options.color);
            renameTitle(options.env);
        }
        else if(icoColor){
            // setFavicon(icoEnv, icoColor);
            renameTitle(icoEnv);
        }
    })
}



